<template>
  <div style="position: relative; width: 100%; height: 100%; display: flex">
    <div
      class="nav-box"
      @click="selectedIndex = index"
      v-for="(item, index) of navList"
      :key="index"
    >
      <router-link
        :class="selectedIndex == index ? 'selected' : ''"
        :to="item.url"
      >
        {{ item.name }}
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedIndex: 0,
      navList: [
        {
          name: "首页",
          url: "/",
        },
        {
          name: "树木/煤炭/工厂/商店",
          url: "/Wood",
        },
        {
          name: "柠檬水大亨",
          url: "/Lingmeng",
        },
        {
          name: "扫雷",
          url: "/Saolei",
        }, 
        {
          name: "猜猜看",
          url: "/guessGuess",
        },
        {
          name: "盒子拖动",
          url: "/DragBox",
        },
        {
          name: "贪吃蛇",
          url: "/SnackGame",
        },
        {
          name: "密室逃脱",
          url: "/RoomEscape",
        },
        {
          name: "纸牌-炸金花",
          url: "/PokerJinhua",
        },
        
      ],
    };
  },
  methods: {},
  mounted() {
    // 用routename匹配index
    this.selectedIndex = this.navList.findIndex(route=>route.url == this.$route.path)
  },
};
</script>

<style lang="scss" scoped>
.nav-box {
  padding: 10px;
}

a {
  padding: 2px 10px;
  border: 2px solid #a5a5a5;
  text-decoration: none;
  color: #ffffff;
  border-radius: 10px;
}

.selected {
  background-color: rgb(47, 47, 47);
  color: #fff;
}
</style>